<template>
	<view class="minishop-goods-list" :class="config.style">
		<view class="header">
			<text class="title">{{params.title}}</text>
			<text class="more" @click="goToMoreLink()">查看更多</text>
		</view>
		<view class="list" :class="params.rank == 1 ? 'rank1':'rank0'">
			<view :class="params.style == 1 ? 'style1':'style0'">
				<view class="item" v-for="(item,index) in params.list" :key="index" @click="goToDetailLink(item.id)">
					<view class="content">
						<view class="cover">
							<!-- #ifdef APP-PLUS -->
							<image :lazy-load="true" :src="item.cover_400"></image>  
							<!-- #endif -->
							 <!-- #ifdef MP -->
							<image mode="widthFix" :src="item.cover_400" @error="imageError" class="image"></image>
							<!-- #endif -->  
							<!-- #ifdef H5 -->
							<img class="image" v-lazy="item.cover_400">  
							<!-- #endif -->
						</view>
						<view class="info">
							<view class="title text-ellipsis-2">{{item.title}}</view>
							<view class="description text-ellipsis" v-if="params.style != 1 && params.rank == 1">{{item.description}}</view>
							<view class="price-box">
								<text class="price">￥ {{item.price == 0 ? '免费':item.price}}</text>
								<text class="marking-price" v-if="config.show_marking_price==1&&item.marking_price!=0">￥ {{item.marking_price}}</text>
							</view>
							<view class="exp-info">
								<view class="item view">
									<uni-icons type="eye" size="10" color="#999999"></uni-icons> 
									<text class="num">{{item.handling_view}}</text>
								</view>
								<view class="item sales">
									<uni-icons type="cart-filled" size="10" color="#999999"></uni-icons> 
									<text class="num">{{item.handling_sales}}</text>
								</view>
								<view class="item favorites">
									<uni-icons type="star" size="10" color="#999999"></uni-icons> 
									<text class="num">{{item.handling_favorites}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//#ifdef MP
	// 小程序端执行
	import siteInfo from '../../../siteinfo.js'
	//#endif
	
	//#ifdef H5
	import siteInfo from '../../../siteinfoH5.js'
	//#endif
	export default {
		name: 'MinishopGoodsList',
		props: {
			title: {
				type: String,
				default: '云小店商品列表'
			},
			type: {
				type: String,
				default: 'minishop_goods_list',
			},
			params: {
				type: Object,
				default: {},
			},
			config: {
				type: Object,
				default: {},
			},
		},
		data() {
			return {
				linkMoreParams: {}
			}
		},
		created() {
			//console.log(JSON.stringify(this.params))
			this.getLinkMoreParams();
		},
		methods: {
			/**
			 * 获取链接参数
			 */
			getLinkMoreParams: function(){
				let linkMoreParams = {
					category_id : this.params.category_id,
					order_field : this.params.order_field,
					order_type: this.params.order_type,
				}
				//console.log(linkParams);
				this.linkMoreParams = linkMoreParams
			},
			
			/**
			 * 路由至商品列表页面
			 */
			goToMoreLink: function(){
				
				let params = this.linkMoreParams
					// 设置来源应用
					params.source = this.util.m
				let urlParams = this.util.urlEncode(params)
				//console.log(urlParams)
				
				// #ifdef MP
				let url = '../../../muu_minishop/pages/goods/lists?' + urlParams
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
				// #endif
				
				// #ifdef H5
				if(this.util.m == 'muu_minishop'){
					let url = '../../../muu_minishop/pages/goods/lists?' + urlParams
					//指定跳转地址
					uni.navigateTo({
					    url: url
					});
				}else{
					// H5端跳转URL
					let base_url = window.location.protocol+"//"+window.location.host + '/addons/muu_minishop/h5/?i=' + siteInfo.uniacid + '#/'
					let url = base_url + 'muu_minishop/pages/goods/lists?' + urlParams
					window.location.href = url
				}
				// #endif
				console.log(url)
			},
			
			/**
			 * 跳转至商品详情页
			 * @param {Object} id
			 */
			goToDetailLink: function(id){
				// #ifdef MP
				let url = '../../../muu_minishop/pages/goods/detail?id=' + id
				console.log(url)
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
				// #endif
				
				// #ifdef H5
				if(this.util.m == 'muu_minishop'){
					let url = '../../../muu_minishop/pages/goods/detail?' + 'id='+id
					console.log(url)
					//指定跳转地址
					uni.navigateTo({
					    url: url
					});
				}else{
					// H5端跳转URL
					let base_url = window.location.protocol+"//"+window.location.host + '/addons/muu_minishop/h5/?i=' + siteInfo.uniacid + '#/'
					let url = base_url + 'muu_minishop/pages/goods/detail?source=muu_classroom&id=' + id
					console.log(url)
					window.location.href = url
				}
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	.minishop-goods-list {
		margin: 10rpx;
		.header {
			display: flex;
			justify-content: space-between;
			padding: 10rpx;
			margin: 10rpx 0;
			.title {
				flex: 1;
				font-size: 34rpx;
				font-weight: 700;
				color: #000;
			}
			.more {
				color: #999;
				font-size: 24rpx;
				line-height: 44rpx;
			}
		}
		/*横排*/
		.list.rank0 {
			
			/*小图*/
			.style0{
				display: flex;
				flex-wrap: wrap;
				.item {
					width: 50%;
					.content {
						padding: 10rpx;
						.cover {
							position: relative;
							border-radius: 10rpx;
							overflow: hidden;
							.image {
								width: 100%;
								display: block;
							}
						}
						.info {
							.title {
								margin-top: 16rpx;
								font-size: 28rpx;
								color: #000;
								font-weight: 600;
								height: 72rpx;
								line-height: 36rpx;
							}
							.description {
								color: #999;
								font-size: 24rpx;
							}
							.price-box {
								margin-top: 10rpx;
								.price {
									font-weight: 700;
									font-size: 26rpx;
								}
								.marking-price {
									font-size: 23rpx;
									color: #999;
									text-decoration:line-through;
									margin-left: 10rpx;
								}
							}
							.exp-info {
								margin-top: 10rpx;
								color: #999;
								font-size: 24rpx;
								.item {
									display: inline;
									.num {
										margin: 0 10rpx;
									}
								}
							}
						}
					}
				}
			}
		}
		/*竖排*/
		.list.rank1 {
			/*小图*/
			.style0{
				display: flex;
				flex-wrap: wrap;
				.item {
					width: 100%;
					.content {
						padding: 10rpx;
						display: flex;
						flex-wrap: wrap;
						.cover {
							position: relative;
							width: 280rpx;
							border-radius: 10rpx;
							overflow: hidden;
							z-index: 2;
							.image {
								width: 100%;
								display: block;
							}
						}
						.info {
							padding-left: 20rpx;
							flex: 1;
							.title {
								font-size: 28rpx;
								color: #000;
								font-weight: 500;
								height: 72rpx;
								line-height: 36rpx;
							}
							.description {
								color: #999;
								font-size: 24rpx;
							}
							.price-box {
								margin-top: 10rpx;
								.price {
									font-weight: 700;
									font-size: 26rpx;
								}
								.marking-price {
									font-size: 23rpx;
									color: #999;
									text-decoration:line-through;
									margin-left: 10rpx;
								}
							}
							.exp-info {
								margin-top: 10rpx;
								color: #999;
								font-size: 24rpx;
								.item {
									display: inline;
									.num {
										margin: 0 10rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}
	
	/*页面风格设计*/
	.Blue {
		.price {
			color: $Blue;
		}
	}
	.Green {
		.price {
			color: $Green;
		}
	}
	.LightRed {
		.price {
			color: $LightRed;
		}
	}
	.Orange {
		.price {
			color: $Orange;
		}
	}
	.LightPink {
		.price {
			color: $LightPink;
		}
	}
	.Magenta {
		.price {
			color: $Magenta;
		}
	}
</style>
